'use strict';

/*
跨域：
    url：协议、主机地址、端口
跨域这个事情本身，是浏览本身的措施或者要求

*/

// 文档加载完成事件的简写形式，也是最常用的形式
$(function () {
    getListWithKeyword();
})

function add() {
    console.log('你点了一下添加按钮');
    location.href = './addOrEdit.html';
}
// 
function getListWithKeyword(keyword) {
    // 注意前端keyword的类型，这里需要提处理，否则其它最终会以字符串的形式传入到后端
    keyword = keyword || ''
    console.log(keyword);
    getProductList(keyword).then(res => {
        console.log(res);
        render(res.data);
    })
}

// 渲染函数，根据传入的列表数据，重新渲染列表
function render(data) {
    let tb = $('#tbData');
    let rowData = $('.rowData');
    rowData.remove();
    data.forEach(item => {
        let h = `
            <tr class="rowData" key="${item.id}">
                <td>${item.id}</td>
                <td>${item.productName}</td>
                <td>${item.price}</td>
                <td>${item.stockNum}</td>
                <td>${item.supplier}</td>
                <td>
                <input type="button" value="编辑" onclick="update(${item.id})">
                <input type="button" value="删除" onclick="del(${item.id})">
                </td>
            </tr>
            `
        tb.append(h);
    })
}